<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>训练订单
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <el-table
        :data="orderlist"
        border
        class="table"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" width="80" align="center" sortable label="序列"></el-table-column>
        <el-table-column prop="trainname" label="训练名称" width="400"></el-table-column>
        <el-table-column prop="username" label="订单用户名" width="300"></el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <template slot-scope="scope">{{scope.row.sex===1?'男':'女'}}</template>
        </el-table-column>
        <el-table-column label="点击返回训练" width="150" align="center">
          <router-link to="/trainmanage">
            <el-button style="color:#ff6348" @click="newdate">返回</el-button>
          </router-link>
        </el-table-column>
        <el-table-column prop="realprice" label="支付金额" width="200"></el-table-column>
        <el-table-column prop="paystate" label="缴费状态"  width="150" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.paystatus==2">
                            <el-button type="danger" icon="el-icon-close" round>未支付</el-button>
                        </template>
                        <template v-else-if="scope.row.paystatus==0">
                            <el-button type="warning" icon="el-icon-loading" round>待支付</el-button>
                        </template>
                        <template v-else>
                            <el-button type="success" icon="el-icon-check" round>已支付</el-button>
                        </template>
                    </template>
                    <!-- 缴费成功 -->
                    <!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
                    <!-- 缴费失败 -->
                    <!-- <el-button type="danger" icon="el-icon-close" circle></el-button> -->
                </el-table-column>
        <el-table-column prop="orderdate" label="订单日期" sortable width="auto"></el-table-column>
      </el-table>
      <!-- <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                </el-pagination>
      </div>-->
    </div>
  </div>
</template>

<script>
import { log } from "util";
export default {
  name: "basetable",
  data() {
    return {
      multipleSelection: [],
      select_cate: "",
      select_word: "",
      is_search: false,
      orderlist: []
    };
  },

  created() {
    this.getData();
  },
  mounted(){
    let _this = this;
      this.$root.$on("reset",(ky) => {
        this.$nextTick(function(){
        _this.getData();
        })
      })
  },
  methods: {
    newdate() {
      this.getData();
      // this.$root.$emit("a1","a2")
    },
    getData() {
      var id = this.$route.params.myId;
      this.$axios
        .get("/api/Trainorder/orderlist/trainid/" + id)
        .then(response => {
          console.log("response :", response.data);
          this.orderlist = response.data;
          console.log(this.orderlist);
        });
    },

    search() {
      this.is_search = true;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style scoped>
p {
  color: #ff0000;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
</style>
